Ember.js একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Authentication এবং CSRF Protection এর মতো নিরাপত্তা ব্যবস্থা যোগ করতে সহায়ক। যখন আপনি Ember.js দিয়ে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করেন, তখন সাধারণত সাইডের নিরাপত্তা ব্যবস্থাগুলি (যেমন সেশন, লগইন) ব্যাকএন্ড সার্ভারের সাথে সংযুক্ত থাকে। তবে Ember.js ফ্রন্টএন্ডের জন্য কিছু সাধারণ নিরাপত্তা পদ্ধতি যেমন Cross-Site Request Forgery (CSRF) প্রতিরোধ এবং Authentication প্রক্রিয়া বাস্তবায়ন করা প্রয়োজন।
এখানে Ember.js-এ CSRF Protection এবং Authentication সেটআপের উপায় নিয়ে আলোচনা করা হবে।
1. CSRF Protection (Cross-Site Request Forgery)
CSRF (Cross-Site Request Forgery) হল একটি নিরাপত্তা আক্রমণ যা ওয়েব অ্যাপ্লিকেশনগুলির জন্য বিপজ্জনক হতে পারে। এটি তখন ঘটে যখন একটি ব্যবহারকারী তাদের অনুমতি ছাড়া অন্য একটি ওয়েবসাইট বা অ্যাপ্লিকেশন থেকে তাদের ব্রাউজারে অনুচিত রিকোয়েস্ট পাঠায়।
Ember.js-এ CSRF প্রতিরোধের জন্য সাধারণত token-based authentication ব্যবহার করা হয়। CSRF টোকেনটি একটি নিরাপদ রিকোয়েস্টের অংশ হিসাবে পাঠানো হয় এবং এটি নিশ্চিত করে যে রিকোয়েস্টটি প্রামাণিক এবং অননুমোদিত উৎস থেকে আসছে না।
CSRF Token পরিচালনা
- CSRF Token পাঠানো:
- Ember.js ক্লায়েন্ট সাইডে, আপনাকে HTTP রিকোয়েস্টের মধ্যে CSRF টোকেন পাঠাতে হবে। সাধারণত, এই টোকেনটি ব্যাকএন্ড থেকে একটি cookie হিসেবে ফেরত আসে, যা পরে প্রতিটি রিকোয়েস্টের মধ্যে Authorization header হিসাবে সংযুক্ত করতে হয়।
CSRF টোকেন ইনজেক্ট করা:
Ember.js-এ CSRF টোকেন ব্যবহারের জন্য আপনি Ember Data বা jQuery এর মাধ্যমে এই টোকেন পাঠাতে পারেন।
উদাহরণ: CSRF Token পাঠানো
ধরা যাক, ব্যাকএন্ড সার্ভার X-CSRF-Token নামক একটি টোকেন ফেরত পাঠায়, যা প্রতি API রিকোয়েস্টের সাথে অন্তর্ভুক্ত করতে হবে।
// app/services/csrf.js
import Service from '@ember/service';
import { inject as service } from '@ember/service';
export default class CsrfService extends Service {
@service ajax; // ember-ajax সার্ভিস
// CSRF টোকেন সেট করা
get csrfToken() {
return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}
// CSRF টোকেন হেডারে পাঠানো
setupRequest(request) {
const token = this.csrfToken;
if (token) {
request.setRequestHeader('X-CSRF-Token', token); // CSRF টোকেন পাঠানো
}
}
}
এখানে, csrfToken ফাংশনটি meta ট্যাগ থেকে CSRF টোকেন গ্রহণ করে এবং setupRequest ফাংশনটি সেটি প্রতিটি API রিকোয়েস্টের হেডারে যোগ করে।
2. Authentication in Ember.js
Authentication (অথেনটিকেশন) হল একটি নিরাপত্তা প্রক্রিয়া যার মাধ্যমে নিশ্চিত করা হয় যে অ্যাপ্লিকেশনের ব্যবহারকারী বৈধ কিনা। Authentication সাধারণত টোকেন-ভিত্তিক পদ্ধতির মাধ্যমে পরিচালিত হয়, যেমন JWT (JSON Web Tokens), যেখানে ক্লায়েন্ট সাইডে একটি টোকেন স্টোর করা হয় এবং প্রতিটি রিকোয়েস্টের সাথে ব্যাকএন্ড সার্ভারে প্রমাণীকরণ করার জন্য পাঠানো হয়।
Authentication Setup
- Login Process: প্রথমে ব্যবহারকারী লগইন করতে হবে। সাধারণত, একটি username এবং password প্রদান করা হয়, এবং সফল হলে একটি token ফেরত আসে।
- Token Storage: সেশন বা স্থানীয় স্টোরেজে এই token সংরক্ষণ করা হয় এবং প্রতিটি API রিকোয়েস্টের জন্য এটি পাঠানো হয়।
Authentication Flow
- ব্যবহারকারী লগইন ফর্ম পূরণ করে।
- সার্ভার সার্ভারে লগইন তথ্য যাচাই করে এবং একটি JWT টোকেন প্রদান করে।
- ক্লায়েন্ট সাইডে JWT টোকেনটি সংরক্ষণ করা হয় এবং প্রতিটি API রিকোয়েস্টে এই টোকেনটি Authorization header-এ পাঠানো হয়।
Ember.js Authentication Example
// app/services/authentication.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
export default class AuthenticationService extends Service {
@tracked isAuthenticated = false;
@tracked user = null;
// টোকেন সেভ করা
saveToken(token) {
localStorage.setItem('auth_token', token);
this.isAuthenticated = true;
}
// টোকেন রিড করা
loadToken() {
const token = localStorage.getItem('auth_token');
if (token) {
this.isAuthenticated = true;
return token;
}
return null;
}
// লগইন করা
login(username, password) {
return this.ajax.post('/api/login', { data: { username, password } })
.then(response => {
this.saveToken(response.token);
});
}
// লগ আউট করা
logout() {
localStorage.removeItem('auth_token');
this.isAuthenticated = false;
}
}
এখানে:
- saveToken() মেথডটি localStorage-এ JWT টোকেন সংরক্ষণ করে।
- loadToken() মেথডটি টোকেন রিড করে এবং যদি টোকেন থাকে, তবে এটি প্রমাণীকৃত হিসেবে চিহ্নিত করে।
- login() মেথডটি সার্ভারে লগইন রিকোয়েস্ট পাঠায় এবং সফল হলে টোকেন সংরক্ষণ করে।
Token Attach to Requests
এখন, এই টোকেনটি যেকোনো API রিকোয়েস্টের সাথে সংযুক্ত করতে হবে।
// app/services/ajax.js
import AjaxService from 'ember-ajax/services/ajax';
import { inject as service } from '@ember/service';
export default class CustomAjaxService extends AjaxService {
@service authentication;
// AJAX রিকোয়েস্টে টোকেন যোগ করা
headers = {
'Authorization': `Bearer ${this.authentication.loadToken()}`
};
}
এখানে, CustomAjaxService-এ Authorization header-এ Bearer token যোগ করা হয়েছে, যা API রিকোয়েস্টের সাথে প্রমাণীকরণ করতে ব্যবহার হবে।
3. Token Expiration and Refresh
Token Expiration-এর ক্ষেত্রে, যদি JWT token মেয়াদোত্তীর্ণ হয়, তাহলে ক্লায়েন্টকে নতুন টোকেন রিফ্রেশ করতে বলা হয়। এটি সাধারণত Refresh Tokens ব্যবহার করে করা হয়, যা সার্ভার থেকে স্বতন্ত্রভাবে ইস্যু করা হয়।
Refresh Token Flow:
- Access Token মেয়াদ শেষ হলে, Refresh Token ব্যবহার করে নতুন Access Token চাওয়া হয়।
- নতুন Access Token আসলে, ক্লায়েন্ট এটি সঞ্চয় করে এবং পরবর্তী API রিকোয়েস্টের জন্য ব্যবহার করা হয়।
Refresh Token Example
// app/services/authentication.js
import Service from '@ember/service';
export default class AuthenticationService extends Service {
refreshToken() {
const refreshToken = localStorage.getItem('refresh_token');
return this.ajax.post('/api/refresh_token', { data: { refresh_token: refreshToken } })
.then(response => {
this.saveToken(response.token); // নতুন টোকেন সেভ করা
});
}
}
এখানে refreshToken() মেথডটি refresh_token পাঠিয়ে নতুন access_token পায় এবং সেটি সেভ করে।
CSRF Protection এবং Authentication এমবারজেএস অ্যাপ্লিকেশনে নিরাপত্তা ব্যবস্থা যোগ করার জন্য গুরুত্বপূর্ণ। CSRF প্রটেকশনের জন্য token-based authentication ব্যবহার করে নিরাপদ রিকোয়েস্ট তৈরি করা যায়, এবং Authentication টোকেন ব্যবস্থাপনার মাধ্যমে ব্যবহারকারীর সেশন এবং নিরাপত্তা নিশ্চিত করা হয়। Ember.js-এর service ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনের নিরাপত্তা ব্যবস্থাপনা সহজে কাস্টমাইজ এবং পরিচালনা করতে পারেন।
Read more